<script setup>
import { useAppStore } from '@/store/modules/app'
const ipc = require("electron").ipcRenderer;

const slots = useSlots();
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  maxVisible: {
    type: Boolean,
    default: true
  }
})

const emits = defineEmits(['close', 'min', 'max', 'restore'])

const appStore = useAppStore();

//关闭
const handleClose = () => {
  ipc.send('window-closed')
  emits('close')
}

//最小化
const handleMinimize = () => {
  appStore.setMax(false)
  ipc.send('window-mini')
  emits('min')
}

const handleMaximize = () => {
  appStore.setMax(true)
  ipc.send('window-max')
  emits('max')
}

const handleUnMaximize = () => {
  appStore.setMax(false)
  ipc.send('window-restore')
  emits('restore')
}

const handleMax = () => {
  if(appStore.max){
    handleUnMaximize();
  }else{
    handleMaximize();
  }
}
</script>

<template>
  <div class="flex justify-between pl-4 window-bar" v-bind="$attrs">
    <div class="flex items-center">
      <a-avatar shape="square" :size="18" class="mr-1" :style="{ backgroundColor: 'transparent' }">
        <img src="@/assets/favicon.ico"/>
      </a-avatar>
      <slot name="title" v-if="slots['title']"></slot>
      <span>{{props.title}}</span>
    </div>
    
    <div class="flex items-center window-right">
      <template v-if="slots['bar-right']">
        <slot name="bar-right"></slot>
        <a-divider direction="vertical" />
      </template>
      <div class="flex flex-row">
        <div class="button-group-item min" @click="handleMinimize" title="最小化">
          <icon icon="ant-design:minus-outlined"></icon>
        </div>
        <div class="button-group-item full-toggle" @click="handleMax" v-if="props.maxVisible" :title="appStore.max ? '向下还原':'最大化'">
          <icon :icon="appStore.max ? 'mingcute:restore-line':'fluent:maximize-24-filled'"></icon>
        </div>
        <div class="button-group-item closed" @click="handleClose" title="关闭">
          <icon icon="ant-design:close-outlined"></icon>
        </div>
      </div>
    </div>
    
  </div>
</template>

<style lang="less" scoped>
.window-bar {
  width: 100%;
  height: var(--window-size);
  -webkit-app-region: drag;
  background-color: var(--color-neutral-2);
  border-bottom: 1px solid var(--color-neutral-3);
  box-sizing: border-box;

  .window-right{
    -webkit-app-region: no-drag;
    
    .button-group-item {
        align-items: center;
        width: var(--window-size);
        text-align: center;
        cursor: pointer;

        &:hover{
          background-color: var(--color-neutral-3);
        }

        &.closed{
          &:hover{
            background-color: rgb(var(--red-6))
          }
        }
      }
  }

}
</style>